<template>
    <div class="pay">
        <headView></headView>
        <div class="mbx">
            <p>首页</p>
            <span>></span>
            <p>购物车</p>
            <span>></span>
            <p>支付订单</p>
        </div>
        <div class="payy">
            <div class="pay1">
                <img src="@/assets/img/111.jpg" alt="">
                <p>
                    <span class="payy1">订单提交成功！请尽快完成支付。</span>
                    <span class="payy2">支付还剩00分00秒，超时后将取消订单</span>
                </p>
                <div>应付总额： <span>￥{{ total }}</span></div>
            </div>
            <div class="pay2">
                <p>选择以下支付方式付款</p>
                <p>支付平台</p>
                <div class="pay_c">
                    <span>微信支付</span>
                    <span>支付宝</span>
                </div>
                <p>支付方式</p>
                <div class="pay_a">
                    <span>招商银行</span>
                    <span>工商银行</span>
                    <span>建设银行</span>
                    <span>农业银行</span>
                    <span>交通银行</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import headView from "../../components/HeadView.vue";
export default {
    name: "PayView",
    components: {
        headView,
    },
    data() {
        return {
            total: "",
        }
    },
    created() {
        console.log(this.$route.query.val);
        this.total = this.$route.query.val
    },


}
</script>

<style lang="scss" scoped>
.pay {
    background: #eee;
}

.mbx {
    width: 1240px;
    height: 70px;
    display: flex;
    align-items: center;
    margin: 0 auto;

    span {
        margin: 0 10px;
        color: #aaa;
    }
}

.payy {
    width: 1240px;
    margin: 0 auto;
    overflow: hidden;

    .pay1 {
        display: flex;
        height: 240px;
        align-items: center;
        background: #fff;
        margin-top: 20px;
        padding: 0 20px;
        box-sizing: border-box;

        img {
            width: 80px;
            height: 80px;
            margin-right: 20px;
        }

        p {
            width: 870px;
            display: flex;
            flex-direction: column;

            span {
                margin: 5px 0;
            }

            .payy1 {
                font-size: 20px;
            }

            .payy2 {
                color: #aaa;
            }
        }

        div {
            span {
                color: #cf4444;
                font-size: 18px;
            }
        }

    }

    .pay2 {
        background: #fff;
        margin: 20px 0;
        padding-bottom: 20px;

        p {
            padding: 0 30px;
            height: 70px;
            line-height: 70px;
        }

        div {
            padding: 0 30px;
            display: flex;

            span {
                width: 150px;
                height: 50px;
                display: block;
                border: 1px solid #eee;
                text-align: center;
                line-height: 50px;
                margin-right: 20px;
            }

        }
    }
}
</style>